window.onload = function () {
    var token = sessionStorage.getItem('token');
    // 刷新token
    axios.post('http://47.113.197.172:80/user/login', {
        name: sessionStorage.getItem('name'),
        password: sessionStorage.getItem('password')
    })
        .then(Response => {
            // 获取登录的用户身份和token令牌
            var newToken = Response.data.token;
            sessionStorage.setItem('token', newToken);
        })
        .catch(err => {
            console.log(err);
        })
    // 获取功能选择按键列表
    var select = document.querySelector('.select');
    var selectLis = select.querySelectorAll('li');

    // 获取功能详情
    var section = document.getElementsByTagName('section');
    var funLis = section[0].children;

    // 给每一个按键都绑定点击事件
    for (var i = 0; i < selectLis.length; i++) {
        // 给每个按键添加索引号，便于之后获取该元素
        selectLis[i].setAttribute('index', i);

        // 点击事件
        selectLis[i].onclick = function () {
            // 获取索引号
            var index = this.getAttribute('index');
            // console.log(index);
            // 排他算法，将全部元素的小蓝块取消
            for (var i = 0; i < selectLis.length; i++) {
                selectLis[i].style.backgroundColor = 'transparent';
                selectLis[i].style.color = 'rgb(134, 144, 156)';
            }
            selectLis[index].style.backgroundColor = 'rgb(232, 243, 255)';
            selectLis[index].style.color = 'rgb(29, 125, 250)';

            // 排他算法，隐藏所有功能详情块
            for (var i = 0; i < funLis.length; i++) {
                funLis[i].style.display = 'none';
            }
            // 显示点击的那一个功能
            funLis[index].style.display = 'block';
        }
    }

    var shieldTitle = document.querySelector('.shieldTitle');
    var shieldLis = shieldTitle.children;

    var shieldInner = document.querySelector('.shieldInner');
    var shieldInnerLis = shieldInner.children;

    // 给每一个按键都绑定点击事件
    for (var i = 0; i < shieldLis.length; i++) {
        // 给每个按键添加索引号，便于之后获取该元素
        shieldLis[i].setAttribute('index', i);

        // 点击事件
        shieldLis[i].onclick = function () {
            // 获取索引号
            var index = this.getAttribute('index');
            // console.log(index);
            // 排他算法，将全部元素的小蓝块取消
            for (var i = 0; i < shieldLis.length; i++) {
                shieldLis[i].style.borderBottom = 'none';
                shieldLis[i].style.color = 'rgb(134, 144, 156)';
            }
            shieldLis[index].style.borderBottom = '1px solid rgb(51, 112, 255)';
            shieldLis[index].style.color = 'rgb(29, 125, 250)';

            // 排他算法，隐藏所有功能详情块
            for (var i = 0; i < shieldLis.length; i++) {
                shieldInnerLis[i].style.display = 'none';
            }
            // 显示点击的那一个功能
            shieldInnerLis[index].style.display = 'block';
        }
    }

    var shieldWriterTitle = document.querySelector('.shieldWriterTitle');
    var shieldWriterTitleLis = shieldWriterTitle.children;

    var articleInner = document.querySelector('.articleInner');
    var boilInner = document.querySelector('.boilInner');

    // 给每一个按键都绑定点击事件
    for (var i = 0; i < shieldWriterTitleLis.length; i++) {
        // 给每个按键添加索引号，便于之后获取该元素
        shieldWriterTitleLis[i].setAttribute('index', i);

        // 点击事件
        shieldWriterTitleLis[i].onclick = function () {
            // 获取索引号
            var index = this.getAttribute('index');
            // console.log(index);
            // 排他算法，将全部元素的小蓝块取消
            for (var i = 0; i < shieldWriterTitleLis.length; i++) {
                shieldWriterTitleLis[i].style.backgroundColor = 'white';
            }
            shieldWriterTitleLis[index].style.backgroundColor = 'rgb(247, 248, 250)';

            if (index == 0) {
                articleInner.style.display = 'block';
                boilInner.style.display = 'none';
            };
            if (index == 1) {
                articleInner.style.display = 'none';
                boilInner.style.display = 'block';
            }
        }
    }

    // 返回个人主页
    var back = document.querySelector('.back');
    back.onclick = function () {
        window.location.href = '../html/userMes.html';
    }


    // 填充已有的个人信息
    addExistMes = function () {
        var id = sessionStorage.getItem('id');
        var baseUrl = 'http://47.113.197.172:80/user/info/';
        var finalUrl = baseUrl + id;
        axios.get(finalUrl)
            .then(Response => {
                // console.log(Response.data.data);
                changeName.value = Response.data.data.name;
                changeJob.value = Response.data.data.job;
                changeCompany.value = Response.data.data.company;
                selfIntro.value = Response.data.data.information;
                mesAvatar.src = Response.data.data.avatar;
            })
            .catch(err => {
                console.log(err);
            })
    }
    addExistMes();




    // 修改用户名
    var changeName = document.getElementById('changeName');
    var outer = document.querySelectorAll('.outer');
    changeName.addEventListener('focus', function () {
        outer[0].style.backgroundColor = 'white';
        outer[0].style.border = '1px solid rgb(30, 128, 255)';
        this.style.backgroundColor = 'white';
    })

    changeName.addEventListener('blur', function () {
        outer[0].style.backgroundColor = 'rgb(250, 250, 250)';
        outer[0].style.border = '1px solid rgb(230, 232, 235)';
        this.style.backgroundColor = 'rgb(250, 250, 250)';
    })

    // 修改职位
    var changeJob = document.getElementById('changeJob');
    changeJob.addEventListener('focus', function () {
        outer[1].style.backgroundColor = 'white';
        outer[1].style.border = '1px solid rgb(30, 128, 255)';
        this.style.backgroundColor = 'white';
    })

    changeJob.addEventListener('blur', function () {
        outer[1].style.backgroundColor = 'rgb(250, 250, 250)';
        outer[1].style.border = '1px solid rgb(230, 232, 235)';
        this.style.backgroundColor = 'rgb(250, 250, 250)';
    })

    // 修改公司
    var changeCompany = document.getElementById('changeCompany');
    changeCompany.addEventListener('focus', function () {
        outer[2].style.backgroundColor = 'white';
        outer[2].style.border = '1px solid rgb(30, 128, 255)';
        this.style.backgroundColor = 'white';
    })

    changeCompany.addEventListener('blur', function () {
        outer[2].style.backgroundColor = 'rgb(250, 250, 250)';
        outer[2].style.border = '1px solid rgb(230, 232, 235)';
        this.style.backgroundColor = 'rgb(250, 250, 250)';
    })

    // 修改公司
    var changePage = document.getElementById('changePage');
    changePage.addEventListener('focus', function () {
        outer[3].style.backgroundColor = 'white';
        outer[3].style.border = '1px solid rgb(30, 128, 255)';
        this.style.backgroundColor = 'white';
    })

    changePage.addEventListener('blur', function () {
        outer[3].style.backgroundColor = 'rgb(250, 250, 250)';
        outer[3].style.border = '1px solid rgb(230, 232, 235)';
        this.style.backgroundColor = 'rgb(250, 250, 250)';
    })

    // 修改个人介绍
    var selfIntro = document.getElementById('selfIntro');
    selfIntro.addEventListener('focus', function () {
        outer[4].style.backgroundColor = 'white';
        outer[4].style.border = '1px solid rgb(30, 128, 255)';
        this.style.backgroundColor = 'white';
    })

    selfIntro.addEventListener('blur', function () {
        outer[4].style.backgroundColor = 'rgb(250, 250, 250)';
        outer[4].style.border = '1px solid rgb(230, 232, 235)';
        this.style.backgroundColor = 'rgb(250, 250, 250)';
    })


    // 用户修改头像
    var changeAvatar = document.getElementById('changeAvatar');
    var mesAvatar = document.getElementById('mesAvatar');
    var avatarUrl;
    changeAvatar.onchange = function () {
        // 预览图片方法一：URL.createObjectURL()
        var data = this.files[0];
        mesAvatar.src = window.URL.createObjectURL(data);

        // 预览图片方法二：FileReader()
        // var reader = new FileReader();
        // // 当图片加载完时，把base64编码赋值给预览图片
        // reader.addEventListener('load', function () {
        //     // console.log(reader.result);
        //     avatar.src = reader.result;
        // });
        // // 转换成base64格式显示
        // reader.readAsDataURL(data);

        // 修改图片
        var fd = new FormData();
        fd.append('avatar', data);
        var confirm = window.confirm('确认上传头像？');
        if (confirm) {
            axios({
                method: 'post',
                url: 'http://47.113.197.172:80/upload/avatar',
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'Authorization': token
                },
                data: fd
            })
                .then(Response => {
                    alert('上传头像成功');
                    // console.log(Response.data);
                })
                .catch(err => {
                    alert('上传头像失败');
                    console.log(err);
                })
        }


    }

    // 提交修改
    var saveInformationBtn = document.querySelector('.saveInformationBtn');
    saveInformationBtn.onclick = function () {
        var job = changeJob.value;
        var company = changeCompany.value;
        var information = selfIntro.value;
        axios({
            method: 'put',
            url: 'http://47.113.197.172:80/user/updateInfo',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': token
            },
            data: {
                job: job,
                company: company,
                information: information,
                avatar: avatarUrl
            }
        })
            .then(Response => {
                alert('修改成功');
                // console.log(Response.data);
            })

            .catch(err => {
                alert('提交失败');
            })
    }




}




